<div class="skin-yellow-light layout-top-nav">
<div class="wraper">
<div ng-controller="navCtrl">
    <header class="main-header">
        <nav class="navbar navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <a ui-sref="home.overview" class="navbar-brand"><img src="img/logo.jpg" class="img" /></a>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
            </div>
            <!-- /.container-fluid -->
        </nav>
    </header>
</div>
<script type="text/javascript">
$('.carousel').carousel({
    interval: 5000
})
</script>
<div class="content-wrapper">
    <div class="container" style="height:600px">
        <section class="content">
            <div id="myCarousel" class="carousel slide carousel-fade">
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <!-- <div class="active item"><img src="img/login_pic1.jpg" alt=""></div>
    <div class="item"><img src="img/login_pic2.jpg" alt=""></div>
    <div class="item"><img src="img/login_pic3.jpg" alt=""></div> -->
                    <div class="active item"><img src="img/11.jpg" alt=""></div>
                    <div class="item"><img src="img/22.jpg" alt=""></div>
                    <div class="item"><img src="img/33.jpg" alt=""></div>
                    <div class="item"><img src="img/44.jpg" alt=""></div>
                    <div class="item"><img src="img/55.jpg" alt=""></div>
                </div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
            </div>
            <div class="login-form" ng-controller="LoginCtrl as vm">
                <div class="login-box-body">
                    <p class="login-box-msg">Welcome to IHG HR System</p>
                    <form ng-submit="vm.login()">
                        <!--  <div class="form-group">
                    <label for="exampleInputEmail1">Region</label>
                     <select class="form-control" ng-model="region" ng-options="o.name as o.name for o in regions" ng-change="selectChangeRegion(region)">
                        <option value="">-- Select Region --</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputEmail1">Cluster</label>
                     <select class="form-control" ng-model="cluster" ng-options="o.name as o.name for o in clusters" ng-change="selectChangeCluster(cluster)">
                        <option value="">-- Select Cluster --</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputEmail1">Hotel</label>
                    <select class="form-control" ng-model="hotel" ng-options="o.name as o.name for o in hotels" ng-change="selectChangeHotel(hotel)">
                        <option value="">-- Select Hotel --</option>
                    </select>
                  </div> -->
                        <div class="form-group">
                            <label for="exampleInputEmail1">Holidex code</label>
                            <input type="text" class="form-control" ng-model="vm.hotel.code" ng-change="vm.getHotelName()" placeholder="Holidex Code">
                        </div>
                        <p ng-show="vm.hotelName">{{vm.hotelName}}</p>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" ng-model="vm.hotel.password" placeholder="Password">
                        </div>
                        <p ng-show="vm.errorMsg" style="color:red"><i class="fa fa-frown-o"></i>{{vm.errorMsg}}</p>
                        <button type="submit" class="btn btn-default">LOGIN</button>
                        <a class="pull-right" ng-click="vm.forget()">Forget Password?</a>
                    </form>
                    <!--  <label>Region</label>
                    <input type="text" class="span12" ng-model="vm.user.userName">
                    <label>Cluster</label>
                    <input type="text" class="span12" ng-model="vm.user.userName">
                    <label>Hotel</label>
                    <input type="text" class="span12" ng-model="vm.user.userName">
                    <label>Password</label>
                    <input type="password" class="span12" ng-model="vm.user.password">
 -->
                </div>
            </div>
        </section>
    </div>
    <footer class="main-footer">
        <div class="container">
            <!-- <img src="img/foot.jpg" alt="" class="img-responsive"> -->
            <!-- <div class="pull-right hidden-xs">
                <b>Version</b> 1.0
            </div> -->
            &copy; 2016 <a href="#">IHG HR System</a>
        </div>
        <!-- /.container -->
    </footer>
</div>
</div>
</div>